<template>
    <el-container class="layout-container-demo" style="height: 100vh">
      <el-aside width="200px">
        <el-scrollbar>
          <h3 class="menu-title">厚溥云课堂管理系统</h3>
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><IconMenu /></el-icon>
                <span>讲师管理</span>
              </template>
              <el-menu-item index="1-1">讲师列表</el-menu-item>
              <el-menu-item index="1-2">添加讲师</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>课程管理</span>
              </template>
              <el-menu-item index="2-1">课程列表</el-menu-item>
              <el-menu-item index="2-2">添加课程</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
  
      <el-container>
        <el-header style="text-align: right; font-size: 20px">
          <div class="toolbar">
            <el-dropdown style="color: white">
              <el-icon style="margin-right: 8px; margin-top: 1px font-size: 18px"
                ><setting
              /></el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>Tom</span>
          </div>
        </el-header>
  
        <el-main>
       <!-- 主内容 -->
       <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </template>
  
  <script lang="ts" setup>
  import { ref } from "vue";
  
  //引入elementPlus图标
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from "@element-plus/icons-vue";
  
  const item = {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  };
  const tableData = ref(Array.from({ length: 10 }).fill(item));
  </script>
  
  <style >
  body {
    margin: 0;
  }
  .layout-container-demo .el-header {
    position: relative;
    background-color: #545c64;
    color: var(--el-text-color-primary);
  }
  .layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background-color: #545c64;
  }
  .layout-container-demo .el-menu {
    border-right: none;
  }
  .layout-container-demo .el-main {
    padding: 0;
  }
  .layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
    color: white;
  }
  .menu-title {
    text-align: center;
    color: white;
  }
  </style>
  